<template>
    <div>
      <h1>Data List</h1>
      <ul>
        <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
      </ul>
      <input v-model="newItemName" placeholder="Enter item name" />
      <button @click="addItem">Add Item</button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios';
  
  const dataList = ref([]);
  const newItemName = ref('');
  
  // 获取数据
  const fetchData = async () => {
    try {
      const response = await axios.get('http://127.0.0.1:5000/api/data');
      dataList.value = response.data;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };
  
  // 添加数据
  const addItem = async () => {
    if (newItemName.value) {
      try {
        const newItem = { name: newItemName.value };
        await axios.post('http://127.0.0.1:5000/api/data', newItem);
        newItemName.value = '';
        fetchData();
      } catch (error) {
        console.error('Error adding data:', error);
      }
    }
  };
  
  // 初始化数据
  fetchData();
  </script>